<template>
  <a-card
    :title="`﹝ ${title} ﹞`"
    :hoverable="true"
    :headStyle="{ fontWeight: 'bold' }"
  >
    <a-descriptions :column="2">
      <template #title>
        <a-Tag style="fontsize: 16px; padding: 3px 10px">提案信息</a-Tag>
      </template>
      <a-descriptions-item label="提案编号">A301</a-descriptions-item>
      <a-descriptions-item label="提案人">{{
        overture?.overturePeople
      }}</a-descriptions-item>
      <a-descriptions-item label="提案日期">{{
        overture?.writeTime
      }}</a-descriptions-item>

      <a-descriptions-item label="提案类型">{{
        overture?.suggestMethod
      }}</a-descriptions-item>

      <a-descriptions-item label="提案名称">
        {{ overture?.overtureName }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <a-Tag style="fontsize: 16px; font-weight: bold; padding: 3px 10px"
      >审核信息</a-Tag
    >
    <a-form
      :model="registerAuditState"
      v-if="overture?.code === code"
      @finish="auditProposal"
    >
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :span="12">
          <a-form-item
            label="审核人"
            name="auditUser"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请填写审核人' }]"
          >
            <a-input
              v-model:value="registerAuditState.auditUser"
            /> </a-form-item
        ></a-col>
        <a-col :span="12">
          <a-form-item
            label="审核时间"
            name="auditTime"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请填写审核时间' }]"
          >
            <a-input v-model:value="registerAuditState.auditTime" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="立案结果"
            name="registerResult"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请选择立案结果' }]"
          >
            <a-radio-group
              v-model:value="registerAuditState.registerResult"
              button-style="solid"
            >
              <a-radio-button value="确定立案">确定立案</a-radio-button>
              <a-radio-button value="作为意见、建议"
                >作为意见、建议</a-radio-button
              >
              <a-radio-button value="不予立案">不予立案</a-radio-button>
            </a-radio-group></a-form-item
          ></a-col
        >
        <a-col :span="12">
          <a-form-item
            label="立案编号"
            name="registerID"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请填写立案编号' }]"
          >
            <a-input v-model:value="registerAuditState.registerID" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="主办单位"
            name="hostUnit"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请选择主办单位' }]"
          >
            <MySelect
              :style="{ borderRadius: '10px' }"
              title="请选择主办单位"
              :selectData="hostUnit"
              :field-names="{ label: '' }"
              @change="changeUnit($event, 'host')" /></a-form-item
        ></a-col>
        <a-col :span="12">
          <a-form-item
            label="协办单位"
            name="assistUnit"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <MySelect
              :mode="'multiple'"
              title="请选择协办单位"
              :selectData="assistList"
              :field-names="{ label: '' }"
              @change="changeUnit($event, 'assist')"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="审核意见"
            :label-col="{ style: { width: '80px' } }"
            :wrapper-col="{ style: { width: 'calc(100% - 80px)' } }"
          >
            <a-textarea :rows="3" v-model:value="registerAuditState.opinion" />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="sign">
          <a-form-item
            label="签字"
            name="sign"
            :label-col="{ style: { width: '80px' } }"
            :wrapper-col="{ style: { width: 'calc(100% - 80px)' } }"
            :rules="[{ required: true, message: '请填写签名' }]"
          >
            <a-input v-model:value="registerAuditState.sign" />
          </a-form-item>
        </a-col>
        <a-col :span="3" :offset="21">
          <a-button @click="router.back()">退回</a-button>
          <a-button type="primary" html-type="submit" style="margin-left: 10px"
            >通过</a-button
          >
        </a-col>
      </a-row>
    </a-form>
    <a-descriptions :column="2" v-else style="margin-top: 20px">
      <a-descriptions-item label="审核人">{{
        overture?.registerAuditData?.auditUser
      }}</a-descriptions-item>
      <a-descriptions-item label="审核时间">{{
        overture?.registerAuditData?.auditTime
      }}</a-descriptions-item>
      <a-descriptions-item label="提案日期">{{
        overture?.writeTime
      }}</a-descriptions-item>

      <a-descriptions-item label="审核意见">
        {{ overture?.registerAuditData?.auditOpinion }}
      </a-descriptions-item>
      <a-descriptions-item label="立案结果">
        <a-tag color="green">
          {{ overture?.registerAuditData?.registerResult }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="承办单位">
        <a-tag color="blue">
          {{ overture?.registerAuditData?.hostUnit }}
        </a-tag>

        <a-tag
          color="orange"
          v-for="i in overture?.registerAuditData?.assistUnit"
          :key="i"
        >
          {{ i }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="审核签字" :span="2">
        {{ overture?.registerAuditData?.auditSign }}
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { registerAuditOverture, getOvertrueConfig } from "@/api/overtrue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
const route = useRoute();
const router = useRouter();
const props = defineProps<{
  overture: any;
  code: number;
  sign: boolean;
  title: string;
  behindData: any;
}>();

onMounted(() => {
  getOvertrueConfig(undefined, props.behindData.behind).then((res: any) => {
    registerAuditState.code = res.data.data[0].code;
    registerAuditState.codeName = res.data.data[0].title;
    registerAuditState.codeColor = res.data.data[0].color;
  });
});

const registerAuditState = reactive({
  overtureId: route.params.id as string,
  code: props.behindData?.code,
  codeName: props.behindData?.title,
  codeColor: props.behindData?.color,
  registerAuditId: "300300300",
  auditUser: "是呆龙没错了(立案审核)",
  auditTime: "2077-300-300",
  registerResult: "",
  registerID: "",
  hostUnit: "",
  assistUnit: "",
  opinion: "",
  sign: null,
  nowCode: props.code,
});
const auditProposal = () => {
  registerAuditOverture(registerAuditState).then(() => {
    message.success("提案立案审核成功!");
    router.back();
  });
};
const changeUnit = (value: string, key: string) => {
  console.log(value, key);
  if (key === "host") {
    registerAuditState.hostUnit = value;
  } else {
    registerAuditState.assistUnit = value;
  }
};
const hostUnit = [
  {
    title: "主办单位1",
    value: "主办单位1",
  },
  {
    title: "主办单位2",
    value: "主办单位2",
  },
  {
    title: "主办单位3",
    value: "主办单位3",
  },
  {
    title: "主办单位4",
    value: "主办单位4",
  },
  {
    title: "主办单位5",
    value: "主办单位5",
  },
  {
    title: "主办单位5",
    value: "主办单位5",
  },
];
const assistList = [
  {
    title: "协办单位1",
    value: "协办单位1",
  },
  {
    title: "协办单位2",
    value: "协办单位2",
  },
  {
    title: "协办单位3",
    value: "协办单位3",
  },
  {
    title: "协办单位4",
    value: "协办单位4",
  },
  {
    title: "协办单位5",
    value: "协办单位5",
  },
  {
    title: "协办单位5",
    value: "协办单位5",
  },
];
</script>

<style scoped lang="less">
:deep(.ant-radio-button-wrapper) {
  margin-right: 10px;
  border-left-width: 1px;
  &::before {
    width: 0px;
  }
}
:deep(.ant-descriptions-item-label) {
  color: #909399;
}
:deep(.ant-card-body) {
  cursor: default;
}
</style>
